<template>
  <!--对话框-->
  <div id="dialog-backgroud" class="dialog-backgroud" ref="dialogBackgroud">
    <div id="dialog" class="dialog" ref="dialog">
      <div class="dialog-head" id="dialog-head">
        <div class="dialog-title" v-text="title"></div>
        <div v-if="!cancelHide" class="dialog-cancel" id="dialog-cancel" @click="cancelClick()">
          <div>×</div>
        </div>
      </div>
      <div class="dialog-content" ref="dialogContent">
        <slot></slot>
      </div>
      <div class="dialog-foot">
        <div class="foot-btn">
          <template v-if="!onlySubmit">
            <div class="dialog-close" id="dialog-close" @click="closeClick()" v-text="close"></div>
          </template>
          <template v-if="!onlyClose">
            <div class="dialog-submit" id="dialog-submit" @click="submitClick()" v-text="submit"></div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String,
                default: () => {
                    return "[标题]"
                }
            },
            submit: {
                type: String,
                default: () => {
                    return "确认"
                }
            },
            close: {
                type: String,
                default: () => {
                    return "关闭"
                }
            },
            width: {
                type: String,
                default: () => {
                    return "600px"
                }
            },
            top: {
                type: String,
                default: () => {
                    return "15%"
                }
            },
            onlySubmit: {
                type: Boolean,
                default: () => false
            },
            onlyClose: {
                type: Boolean,
                default: () => false
            },
            cancelHide: {
                type: Boolean,
                default: () => false
            },
        },
        data() {
            return {
                timeout: null,
            }
        },
        methods: {
            openDialog() {
                this.$refs.dialogBackgroud.style.display = "block"
                this.$refs.dialog.style.width = this.width
                this.$refs.dialog.style.top = this.top
                this.timeout = setTimeout(() => {
                    this.$refs.dialogBackgroud.style.backdropFilter = "blur(1.5px) brightness(100%)"
                    this.$refs.dialog.style.transform="scaleY(1) scale(1)"
                }, 1)
                
            },
            submitClick() {
                // this.closeDialog()
                this.$emit("hu-dialog",true)
            },
            cancelClick() {
                this.closeDialog()
                this.$emit("hu-dialog",false)
            },
            closeClick() {
                this.closeDialog()
                this.$emit("hu-dialog",false)
            },

            closeDialog() {
                this.$refs.dialogBackgroud.style.backdropFilter = "none"
                this.$refs.dialog.style.transform="scaleY(0) scale(0.5)"
                this.timeout = setTimeout(() => {
                    this.$refs.dialogBackgroud.style.display = "none"
                }, 200)
            },
        }
    }
</script>
<style scoped>
  .dialog {
    Width: 600px;
    min-height: 0px;
    border-radius: 3px;
    position: fixed;
    top:15%;
    left: 0;
    right: 0;
    margin: auto;
    letter-spacing: 1px;
    background-color: #222833; /*背景颜色*/
    transition: 0.2s;
    border: 1px #2d343f solid;
    z-index: 999;
    transform: scaleY(0) scale(0.5);
  }
  .dialog-head {
    cursor: auto;
    width: 100%;
    height: 30px;
    border-bottom: 1px #272d38 solid;
    background-color: #1e2430;
  }
  .dialog-title {
    user-select:none;
    cursor: auto;
    float: left;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 100%;
    text-indent: 0.8em;
    line-height: 30px;
    font-size: 16px;
    font-weight: bolder;
    color: rgba(255, 255, 255, 0.6);
  }
  .dialog-head .dialog-cancel {
    user-select:none;
    cursor: pointer;
    float: right;
    width: 30px;
    /*height: 100%;*/
    margin-right: 5px
  }
  .dialog-cancel div {
    /*height: 70%;*/
    width: 70%;
    margin: 13% 15%;
    border-radius: 3px;
    line-height: 120%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    transition: 0.1s;
  }
  .dialog-cancel div:hover {
    background-color: #272d38;
    color: rgba(255, 255, 255, 0.7);
  }
  .dialog-cancel div:active {
    background-color: #2e3541;
  }
  .dialog-foot {
    /* width: 100%;
    height: 30px;
    border-top: 1px #272d38 solid;
    background-color: #1e2430; */
  }
  .foot-btn{
    float: right;
    min-width: 100px;
    margin: 0 13px;
    margin-right: 10px;
    margin-bottom: 6px;
  }
  .dialog-submit {
    user-select:none;
    cursor: pointer;
    float: right;
    min-width: 0px;
    height: 20px;
    line-height: 20px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 5px;
    font-size: 12px;
    border-radius: 2px;
    text-align: center;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.3);
    background-color: #262d38;
    transform: 0.3s;
  }
  .dialog-close {
    user-select:none;
    cursor: pointer;
    float: right;
    min-width: 0px;
    height: 20px;
    line-height: 20px;
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 5px;
    font-size: 12px;
    border-radius: 2px;
    text-align: center;
    border: 1px solid transparent;
    color: rgba(255, 255, 255, 0.3);
    background-color: #262d38;
    transform: 0.3s;
  }
  .dialog-close:hover,.dialog-submit:hover {
    border: 1px solid #464c57;
    background-color: #2a323e;
    color: rgba(255, 255, 255, 0.5);
  }
  .dialog-close:active,.dialog-submit:active {
    background-color: #2f353d;
  }
  .dialog-content {
    width: 100%;
    min-height: 0px;
    color: rgba(255, 255, 255, 0.41);
  }

  .dialog-backgroud {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color:rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
</style>
